<template>
  <!-- 关于我页面 -->
  <div id="main" :style="{ backgroundImage: `url(${backgroundimg})` }">
    <!-- 顶部导航栏 -->
    <div id="top">
      <div class="title">
        <span>About us</span>
      </div>
      <div class="back">
        <el-button icon="el-icon-back" @click="leftClick">Back to home</el-button>
      </div>
    </div>
    <!-- 页面内容块 -->
    <div id="aboutme-main-out">
      <div id="aboutme-main">
        <!-- 个人信息 -->
        <van-row type="flex" class="row1">
          <van-col span="10">
            <van-image width="100%" fit="contain" :src="photo" />
          </van-col>
          <van-col span="12">
            <div class="name">
              <span>{{aboutmeList.name}}</span>
            </div>
            <div id="information-personal">
              <ul>
                <li>联系地址：{{ aboutmeList.address }}</li>
                <li>兴趣爱好：{{ aboutmeList.hobby }}</li>
                <li>偶像爱豆：{{ aboutmeList.love }}</li>
                <li>联系方式：{{ aboutmeList.phone }}</li>
                <li>邮箱：{{ aboutmeList.email }}</li>
              </ul>
            </div>
          </van-col>
        </van-row>

        <!-- 分割线 -->
        <van-divider />
        <!-- 个人介绍 -->
        <div class="block">
          <el-timeline>
            <el-timeline-item 
            v-for="(activity, index) in aboutmeList.activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            placement="top">
              <el-card id="card">
                <span>{{activity.content}}</span>
                <p v-html="activity.detail"></p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>

      </div>
    </div>
    <Blogup/>
  </div>
</template>

<script>
import Blogup from "../Blog/components/Blogup"
export default {
  name: "About_me",
  components: {
    Blogup,
  },
  data() {
    return {
      photo: require("@/assets/Album_imgList/5.jpg"),
      aboutmeList: {},
      backgroundimg: require("@/assets/xc1.jpg"),
      
    };
  },
  methods: {
    // 点击返回主页
    leftClick() {
      console.log("返回主页");
      this.$router.push({ path: "/home" });
    },
  },
  created() {
    // 获取本地json数据
    this.axios.get("/data/aboutme.json").then((res) => {
      this.aboutmeList = res.data;
      // 测试是否获取到本地数据
      console.log(this.aboutmeList);
    });
  },
};
</script>

<style lang="less" scoped>
#main {
  position: relative;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
#aboutme-main-out {
  padding: 10px;
  color:#7a6d63;
}
#aboutme-main {
  border-radius: 2px;
  padding: 7px;
  background-color: rgba(255, 255, 255, 0.8);
}
.row1{
  display: flex;
  justify-content:space-between;
  align-items: center;
}
#information-personal{
  border: 0.7px solid rgb(187, 179, 165);
  width: 105px;
  height: 80px;
  padding: 10px 7px;
  box-shadow: 50px 50px 10px 0px rgb(225, 178, 131);
}
#information-personal li {
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 7px;
  padding-bottom: 5px;
}
#content-item {
  margin-bottom: 30px;
}
#content-item h1 {
  background-color: rgb(224, 185, 152);
  margin: 0;
}
#content-item span {
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 7px;
}
.name{
  font-family: STLiti;
  font-size: 15px;
  margin-bottom: 10px;
}
.title{
  text-align: center;
  padding-bottom: 6px;
  font-size: 16px;
  color: aliceblue;
  font-family: STLiti;
}
.back{
  position: fixed;
  margin-top: -20px;
  z-index: 1;
}
.el-button {
  background:transparent;
  color: rgb(236, 235, 235);
  width: 60px;
  height: 5px;
  font-size: 5px;
  padding: 7px 10px;
}
#card span{
  font-size: 8px;
}
#card p{
  font-size: 9px;
}
</style>